import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Page {
    id: root
    title: "按钮颜色"
    
    SystemPalette {
        id: systemPalette
        colorGroup: SystemPalette.Active
    }

    SystemPalette {
        id: disabledPalette
        colorGroup: SystemPalette.Disabled
    }
    
    ScrollView {
        id: scrollView
        anchors.fill: parent
        contentWidth: availableWidth
        
        ColumnLayout {
            anchors.horizontalCenter: parent.horizontalCenter
            width: Math.min(parent.width - 40, 400)
            spacing: 20
            
            Item { height: 10 }
            
            Label {
                text: "按钮颜色展示"
                font.pixelSize: 18
                font.bold: true
                Layout.fillWidth: true
                horizontalAlignment: Text.AlignHCenter
            }
            
            // 正常按钮
            Button {
                Layout.fillWidth: true
                Layout.preferredHeight: 80
                text: "正常按钮\nbutton: " + systemPalette.button + "\nbuttonText: " + systemPalette.buttonText
                
                contentItem: Text {
                    text: parent.text
                    color: systemPalette.buttonText
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
                
                background: Rectangle {
                    color: systemPalette.button
                    border.color: systemPalette.dark
                    border.width: 1
                }
            }
            
            // 禁用按钮
            Button {
                Layout.fillWidth: true
                Layout.preferredHeight: 80
                enabled: false
                text: "禁用按钮\ndisabled button: " + disabledPalette.button + "\ndisabled buttonText: " + disabledPalette.buttonText
                
                contentItem: Text {
                    text: parent.text
                    color: parent.enabled ? systemPalette.buttonText : disabledPalette.buttonText
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
                
                background: Rectangle {
                    color: parent.enabled ? systemPalette.button : disabledPalette.button
                    border.color: parent.enabled ? systemPalette.dark : disabledPalette.dark
                    border.width: 1
                }
            }
            
            // 带占位符的按钮
            Button {
                Layout.fillWidth: true
                Layout.preferredHeight: 80
                text: "占位符文本按钮\nplaceholderText: " + systemPalette.placeholderText
                
                contentItem: Text {
                    text: parent.text
                    color: systemPalette.placeholderText
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
                
                background: Rectangle {
                    color: systemPalette.base
                    border.color: systemPalette.mid
                    border.width: 1
                }
            }
            
            Item { height: 20 }
        }
    }
} 
